<template>
	<div class="main">
		

		<div ref="contentRef" class="flex">
			<PureTableBar class="w-full" style="transition: width 220ms cubic-bezier(0.4, 0, 0.2, 1)" title="统计"
				:columns="dataColumns" @refresh="getInitTable">

				<template v-slot="{ size, dynamicColumns }">
					<pure-table ref="tableRef" align-whole="center" showOverflowTooltip table-layout="auto"
						:loading="loading" adaptive :adaptiveConfig="{ offsetBottom: 108 }" :size="size"
						:data="dataList" :columns="dynamicColumns" :paginationSmall="false"
						:header-cell-style="{  background: 'var(--el-fill-color-light)', color: 'var(--el-text-color-primary)'
						}">
						<template #number="{ row }">
							<!-- <span :style="row.type === 2?'color: red;':''">{{row.changeNum}}</span> -->
						</template>
					</pure-table>
				</template>
			</PureTableBar>
		</div>
	</div>
</template>

<script setup lang="ts">
	import Refresh from "@iconify-icons/ep/refresh";
	import { ref, reactive, onMounted, toRaw } from "vue";
	import { PureTableBar } from "@/components/RePureTableBar";
	import {
		getTotalDataApi
	} from "@/api/warehouseApi";


	const loading = ref(false)
	const dataList = ref([])
	const typeOptions = ref([
		{
			id: 1,
			name: '上架入库'
		},
		{
			id: 2,
			name: '下架出库'
		}
	])
	const dataColumns : TableColumnList = [
		{
			label: "ID",
			prop: "warehouseId",
			width: 80
		},
		{
			label: "仓库名称",
			prop: "warehouseName"
		},
		{
			label: "仓库编码",
			prop: "warehouseCode"
		},
		{
			label: "库区总数",
			prop: "warehouseAreaTotal"
		},
		
	]
	const getInitTable = async () => {
		loading.value = true;
		const { result } = await getTotalDataApi();
		dataList.value = result;

		setTimeout(() => {
			loading.value = false;
		}, 150);
	}

	onMounted(() => {
		getInitTable()
	})

</script>

<style scoped>
	.main-content {
		margin: 10px 10px 0 !important;
	}

	.appendNum {
		cursor: pointer;
	}

	:deep(.el-input-number) {
		width: 100%;
	}
</style>